import type { App, DirectiveBinding } from "vue";
import error from "@/assets/images/error.png";
/*
1.插件本质就是一个对象
  对象中有一个install()函数，形参是app或者Vue，app.use()或者Vue.use()本质是在执行install()函数
2.创建观察对象实例
const observer = new IntersectionObserver(callback[, options])
3.callback 被观察dom进入可视区离开可视区都会触发
 - 两个回调参数 entries , observer
 - entries 被观察的元素信息对象的数组 [{元素信息},{}]，信息中isIntersecting判断进入或离开
 - observer 就是观察实例
4.options 配置参数
 - 三个配置属性 root rootMargin threshold
 - root 基于的滚动容器，默认是document
 - rootMargin 容器有没有外边距
 - threshold 交叉的比例
5.实例提供两个方法
 observe(dom) 观察哪个dom
 unobserve(dom) 停止观察那个dom
*/
export default {
   install(app: App): void {
      app.directive("lazy", (el: HTMLImageElement, binding: DirectiveBinding<string>): void => {
         const observer: IntersectionObserver = new IntersectionObserver(([{ isIntersecting }]): void => {
            if (isIntersecting) {
               observer.unobserve(el);
               el.classList.remove("loading")
               el.src = binding.value;
               el.addEventListener("error", (): void => {
                  el.src = error;
               });
            }
         }, { threshold: 0 });
         observer.observe(el);
      });
   },
};
